<template>
  <div>
    <a-modal v-model="visible" :footer="null" @cancel="cancel" :title="$t('Declare-title')" 
             :maskClosable="false" :width="700" v-dragModal>
      <p class="declare_title">{{$t('Declare-title')}}</p><!--广电五舟软件声明-->
      <p class="paragraph">{{$t('Declare-desc')}}</p>
      <p class="paragraph"><span>{{$t('Declare-Num0')}} </span> {{$t('Declare-desc0')}}</p>
      <p class="paragraph"><span>{{$t('Declare-Num1')}} </span> {{$t('Declare-desc1')}}</p>
      <p class="paragraph"><span>{{$t('Declare-Num2')}} </span> {{$t('Declare-desc2')}}</p>
      <p class="paragraph"><span>{{$t('Declare-Num3')}} </span> {{$t('Declare-desc3')}}</p>
      <p class="paragraph"><span>{{$t('Declare-Num4')}} </span> {{$t('Declare-desc4')}}</p>
      <p class="paragraph"><span>{{$t('Declare-Num5')}} </span> {{$t('Declare-desc5')}}</p>
      <p class="paragraph"><span>{{$t('Declare-Num6')}} </span> {{$t('Declare-desc6')}}</p>
      <p class="paragraph"><span>{{$t('Declare-Num7')}} </span> {{$t('Declare-desc7')}}</p>
      <p class="paragraph"><span>{{$t('Declare-Num8')}} </span> {{$t('Declare-desc8')}}</p>
      <p class="paragraph"><span>{{$t('Declare-Num9')}} </span> {{$t('Declare-desc9')}}</p>
      <p class="paragraph"><span>{{$t('Declare-Num10')}} </span> {{$t('Declare-desc10')}}</p>
      <p class="paragraph"><span>{{$t('Declare-Num11')}} </span> {{$t('Declare-desc11')}}</p>
      <p class="paragraph"><span>{{$t('Declare-Num12')}} </span> {{$t('Declare-desc12')}}</p>
      <p class="paragraph"><span>{{$t('Declare-Num13')}} </span> {{$t('Declare-desc13')}}</p>
      <p class="paragraph"><span>{{$t('Declare-Num14')}} </span> {{$t('Declare-desc14')}}</p>
      <p class="paragraph"><span>{{$t('Declare-Num15')}} </span> {{$t('Declare-desc15')}}</p>
      <p class="paragraph"><span>{{$t('Declare-Num16')}} </span> {{$t('Declare-desc16')}}</p>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "SoftwareDeclare",
  props: ['isVisible'],
  data() {
    return {
      visible: false
    }
  },
  watch: {
    isVisible(newValue) {
      this.visible = newValue;
      if(newValue) {
        this.$nextTick(() => {
          const contentDom = document.querySelector('.ant-modal-body');
          contentDom.scrollTop = 0;
        })
      }
    }
  },
  methods: {
    cancel() {
      this.$emit('isOpenDeclare', false);
    },
  }
}
</script>

<style scoped>
  .declare_title {
    text-align: center;
    font-weight: 700;
  }
  .paragraph {
    /* 段落开头空两格 */
    text-align:justify;
    text-indent:2em;
  }
  .paragraph span:nth-child(1){
    font-weight: 700;
  }
  ::v-deep.ant-modal-body {
    height: 620px;
    overflow: auto;
  }
  ::v-deep.ant-modal {
    top: 20px;
  }
  ::v-deep.ant-modal-header {
    border-bottom: 1px solid var(--themeColor);
    text-justify: inter-ideograph;/*兼容ie*/
  }
</style>